<template>
  <el-row class="addActivity">
      <el-row>
        <el-col :span="10" >
          <el-steps :space="200" :active="active" @change="toNext()" v-show="isIntroduction">
            <el-step title="选择类型"></el-step>
            <el-step title="基本信息"></el-step>
          </el-steps>
          <el-steps :space="200" :active="active" @change="toNext()" v-show="isLogin">
            <el-step title="选择类型"></el-step>
            <el-step title="基本信息"></el-step>
            <el-step title="选择卡券"></el-step>
          </el-steps>
          <el-steps :space="200" :active="active" @change="toNext()" v-show="isInvestment">
            <el-step title="选择类型"></el-step>
            <el-step title="基本信息"></el-step>
            <el-step title="选择卡券"></el-step>
            <el-step title="选择产品"></el-step>
          </el-steps>
        </el-col>
      </el-row>
      <choose-type @getType="getActivity" v-if="true" v-show="modulesShow=='type'?true:false"></choose-type>
      <basic-info :pageType="'create'" @getInfoData="getBasicInfo" @back="goBack" @startCreateAct="createInit"   v-if="active>1?true:false" v-show="modulesShow=='basic'?true:false" ></basic-info>
      <link-coupon :pageType="'create'" @back="goBack" @getCouponData="getCouponInfo" @startCreateAct="createInit" v-show="modulesShow=='coupon'?true:false" v-if="active>2?true:false" ></link-coupon>
      <link-product :pageType="'create'" @back="goBack"  @startCreateAct="createInit"  v-show="modulesShow=='product'?true:false" v-if="active>3?true:false"></link-product>
    
   
  </el-row>
</template>
<script>
  import ChooseType from '../components/ChooseActType.vue'
  import BasicInfo from '../components/BasicInfo.vue'
  import LinkCoupon from '../components/LinkCoupon.vue'
  import LinkProduct from '../components/LinkProduct.vue'
  import {postLog} from 'api/common/index.js';
  export default{
    data () {
      return {
        activityId: '',
        active: 1, //步骤条
        isLogin: false, //是否注册
        isInvestment: true, //是否投资
        isIntroduction: false, //是否推广
        activityType: '', //选中的活动类型
        modulesShow: 'type', //切换隐藏和显示
        modulesIf: 'type', //切换删除组件和显示
        basicInfoFrom: {}, //基本信息表单
        couponInfoForm: {}, //卡券表单
        productInfoFrom: {} //产品表单
      }
    },
    created () {
      this.$emit('setTitleMsg', ['活动管理', '新增'])
    },
    computed: {
      typeInfo () {
        return this.$store.state.actType;
      }
    },
    watch: {
      typeInfo (val, oldval) {
        if (val.modulesCount == 1) {
          this.isIntroduction = true;
          this.isInvestment = false;
          this.isLogin = false;
        } else if (val.modulesCount == 2) {
          this.isLogin = true;
          this.isIntroduction = false;
          this.isInvestment = false;
        } else if (val.modulesCount == 3) {
          this.isInvestment = true;
          this.isIntroduction = false;
          this.isLogin = false;
        }
      }
    },
    methods: {
//      获取活动类型
      getActivity (activity) {
        this.activityType = activity.activityType;
        this.active = activity.step;
        this.modulesShow = activity.showModules;
      },
//      获取基本信息
      getBasicInfo (info) {
        let {basicInfoFrom, showModules, active} = info;
        this.modulesShow = showModules;
        this.basicInfoFrom = basicInfoFrom;
        this.active = active;
      },
//      获取卡券信息
      getCouponInfo (info) {
        let {couponInfoFrom, showModules, active} = info;
        this.modulesShow = showModules;
        this.couponInfoForm = couponInfoFrom;
        this.active = active;
      },
      toNext () {
      },
      goBack (info) {
        let {showModules, active} = info;
        this.modulesShow = showModules;
        this.active = active;
      },
      createInit (info) {
        console.log(JSON.stringify(info));
//       如果只需要创建活动
        if (info.finishStep == 1) {
          this.basicInfoFrom = info.basicInfoFrom;
          this.createActivity('basic');
        }
//        如果需要关联卡券
        if (info.finishStep == 2) {
          console.log(info.couponInfoFrom);
          this.couponInfoForm = info.couponInfoFrom;
          this.createActivity('coupon');
        }
//        如果需要关联产品
        if (info.finishStep == 3) {
          this.productInfoFrom = info.productInfoFrom;
          this.createActivity('product');
        }
      },
      createActivity (step) {
        console.log(this.basicInfoFrom);
        this.$http.post('/api-active/v1/api/activityCenter/activity', this.basicInfoFrom)
            .then((response) => {
              let data = response.body;
              console.log(data);
              if (data.resultCode == '200') {
                this.activityId = data.result.id;
                postLog('ACTIVITY_LIST_CREATE', '', this.basicInfoFrom.name, this.basicInfoFrom)
                if (step == 'basic') {
                  this.$router.push({name: 'activityList'});
                } else {
                  this.activityLinkCoupon(step);
                }
              }
            });
      },
      activityLinkCoupon (step) {
        this.couponInfoForm.activityId = this.activityId;
        let coupons = this.couponInfoForm.couponRewardConditions;
        for (let key in coupons) {
          coupons[key].activityId = this.activityId;
        }
        this.$http.put('/api-active/v1/api/activityCenter/activity/coupon', this.couponInfoForm)
          .then((response) => {
            let data = response.body;
            console.log(data);
            if (data.resultCode == '200') {
              if (step == 'coupon') {
                this.$router.push({name: 'activityList'});
              } else if (step == 'product') {
                this.activityLinkProduct();
              }
            }
          })
      },
      activityLinkProduct () {
        this.productInfoFrom.activityId = this.activityId;
        this.$http.put('/api-active/v1/api/activityCenter/activity/product', this.productInfoFrom)
          .then((response) => {
            let data = response.body;
            console.log(data);
            this.$router.push({name: 'activityList'})
          })
      }
    },
    components: {
      ChooseType: ChooseType,
      BasicInfo: BasicInfo,
      LinkCoupon: LinkCoupon,
      LinkProduct: LinkProduct
    }
  }
</script>
<style scoped lang="less">
  .content{
    background: #ffffff;
    min-height: 100%;
    padding:20px 50px;
  }
</style>
